
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../static/css/mainPage.css" th:href="@{/css/mainPage.css}">
    <link rel="stylesheet" href="../static/css/iconfont.css" th:href="@{/css/iconfont.css}">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

</head>
<body>
<div style="height: 9.5vh; display: flex; justify-content: center; align-items: center; position: relative;width: 100%">
    <div class="header header1">

        <div class="logoName">
            <img src="../static/img/name.png" alt="" class="logo-name-img" th:src="@{/img/name.png}">
        </div>

        <nav>
            <ul >
                <li class="mainPage" ><a href="" style="color: #0087fe;">首页</a></li>
                <li class="wait-answer"><a href="">想法</a></li>
            </ul>
        </nav>
        <form class="search-form" th:action="@{/selectByKeywords}" method="get">
            <label >
            <span>

                <input type="text" placeholder="请输入" name="keywords">
                <i class="iconfont search-icon">&#xe620;</i>
            </span>

            </label>
            <button class="ask-question-btn">搜索</button>
        </form>
        <div class="user-info">
<!--            <div style="margin-right: 60px;" class="message">-->
<!--                <i class="iconfont message-icon">&#xe625;</i>-->
<!--                <i class="message-detail">消息-->

<!--                </i>-->
<!--                <div class="notification-container">-->
<!--                    <div class="notification-header">-->
<!--                    <span class="menu-text">-->
<!--                        <i class="menu-icon iconfont middle " style="color: #ff9606;">&#xe608; </i> 菜单</span>-->
<!--                        <span class="user-text">-->
<!--                        <i class="iconfont little user-icon">&#xe659; </i> 用户</span>-->
<!--                        <span class="favorites-text">-->
<!--                        <i class="iconfont little favorites-icon">&#xe6de; </i> 点赞</span>-->
<!--                    </div>-->
<!--                    <div class="notification-list">-->
<!--                        <div class="notification-item">-->
<!--                            <span class="sender">槿木</span>-->
<!--                            <span class="action">邀请你回答问题</span>-->
<!--                            <span class="question">高三，谈恋爱和前途应该选哪一个?</span>-->
<!--                            <span class="time">2025-04-18 08:31</span>-->
<!--                        </div>-->
<!--                        <div class="notification-item">-->
<!--                            <span class="sender">倩倩有点冷 </span>-->
<!--                            <span class="action"> 邀请你回答问题</span>-->
<!--                            <span class="question">你觉得没对象和没钱哪个更可怕?</span>-->
<!--                            <span class="time">2025-04-18 08:31</span>-->
<!--                        </div>-->
<!--                        <div class="notification-item">-->
<!--                            <span class="sender">十三</span>-->
<!--                            <span class="action">的提问等你来答</span>-->
<!--                            <span class="question">累的时候，你是选择喝酒，还是一个人旅行?</span>-->
<!--                            <span class="time">2020-10-13 20:20</span>-->
<!--                        </div>-->
<!--                        <div class="notification-item last" >-->
<!--                            <span class="sender">清欢渡</span>-->
<!--                            <span class="action">的提问等你来答</span>-->
<!--                            <span class="question">我真的爱她，前途和她哪个重要?</span>-->
<!--                            <span class="time">2020-10-13 20:20</span>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="notification-list2" >-->
<!--                        <div class="notification-item-header">-->
<!--                            <span>这些人最近关注了你</span>-->
<!--                        </div>-->
<!--                        <div class="notification-item">-->
<!--                            <div class="notification-item-img">-->
<!--                                <img src="../static/img/OIP-C.jpg " alt="" th:src="@{/img/OIP-C.jpg}">-->
<!--                            </div>-->
<!--                            <div  class="notification-item-detail">-->
<!--                                <span class="id">樱桃</span>-->
<!--                                <span>难的相遇一下，真的不关注一下吗</span>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div class="notification-item">-->
<!--                            <div class="notification-item-img">-->
<!--                                <img src="../static/img/OIP-C (1).jpg" alt="" th:src="@{/img/OIP-C (1).jpg}">-->
<!--                            </div>-->
<!--                            <div class="notification-item-detail">-->
<!--                                <span class="id">偷偷看你一下</span>-->
<!--                                <span>关注一下吧</span>-->
<!--                            </div>-->
<!--                        </div>-->

<!--                    </div>-->

<!--                    <div class="none">-->
<!--                <span>-->
<!--                    <i class="iconfont big" >&#xea09;</i>-->
<!--                    暂无消息哦~-->
<!--                </span>-->

<!--                    </div>-->
<!--                    <div class="footer">-->
<!--                <span class="settings-text">-->
<!--                    <i class="iconfont">&#xe66f;</i>设置</span>-->
<!--                        <span class="view-all-text">查看全部通知</span>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
<!--            <div style="margin-right: 60px;" class="private-message">-->
<!--                <i class="iconfont private-message-icon">&#xe6e2;</i>-->
<!--                <i class="private-message-detail">私信</i>-->
<!--                <div class="notification-container2">-->
<!--                    <div class="notification-header">-->
<!--                    <span class="private-message-text">-->
<!--                        <i class="private-massage-icon iconfont middle " >&#xe634; </i>我的私信-->
<!--                    </span>-->
<!--                    </div>-->
<!--                    <div class="notification-list3" >-->
<!--                        <div class="notification-item">-->
<!--                            <div class="notification-item-img">-->
<!--                                <img src="../static/img/下载.jpg" alt="" th:src="@{/img/下载.jpg}">-->
<!--                            </div>-->
<!--                            <div  class="notification-item-detail">-->
<!--                                <span class="id">慧问小管家</span>-->
<!--                                <span>亲爱的 慧问用户 你好：欢迎你来到慧问：...</span>-->
<!--                            </div>-->
<!--                        </div>-->

<!--                    </div>-->
<!--                    <div class="footer">-->
<!--                    <span class="settings-text">-->
<!--                        <i class="iconfont">&#xe627; </i> 写私信</span>-->
<!--                        <span class="view-all-text">查看全部私信</span>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->
            <div class="user-actions">
                <img th:src="${session.user?.avatar ?: '/img/Icon -默认头像_爱给网_aigei_com.png'}" alt="User Avatar" class="user-avatar">
                <ul class="dropdown-menu">
                    <li class="personalMainPage"> <i class="iconfont">&#xe629;</i><a href="">我的主页</a></li>
                    <li><i class="iconfont">&#xe6de;</i><a href="">无障碍</a></li>
                    <li><i class="iconfont">&#xe67a;</i><a href="">关怀版</a></li>
                    <li><i class="iconfont">&#xe600;</i><a href="">设置</a></li>
                    <li><i class="iconfont">&#xe626;</i><a href="">退出</a></li>
                </ul>
            </div>



        </div>
    </div>
    <div class="header header2">

        <div class="logoName">
            <img src="../static/img/name.png" alt="" class="logo-name-img" th:src="@{/img/name.png}">
        </div>

        <nav class="top-story-main-column-card-head-nav top-story-main-column-card-head-nav2">
            <a href="/mainPageAttention"  th:href="@{/mainPageAttention}" class="first-a attention-a"  style="color: #0087fe;"><i class="iconfont iconfont-pattention" style="color: #ff9606;">&#xe602;</i> 关注</a>
            <a href="/mainPageRecommend" class="recommend-a"  th:href="@{/mainPageRecommend}"  ><i class="iconfont iconfont-recommend"  style="color: rgb(92, 137, 219);">&#xe628;</i> 推荐</a>
            <a href="/mainPageTrending"  th:href="@{/mainPageTrending}" class="trending-a" ><i class="iconfont iconfont-trending" style="color: red;">&#xe603;</i> 热搜</a>
            <a href="/mainPageVedio"  th:href="@{/mainPageVedio}" class="vedio-a"><i class="iconfont iconfont-vedio" style="color: rgba(218, 218, 42, 0.608);">&#xe60a;</i> 视频</a>

        </nav>n  n
        <form class="search-form" th:action="@{/selectByKeywords}" method="get">
            <label >
            <span>

                <input type="text" placeholder="请输入" name="keywords">
                <i class="iconfont search-icon">&#xe620;</i>
            </span>

            </label>
            <button class="ask-question-btn">搜索</button>
        </form>
    </div>
</div>
<!-- <div class="Haven-introduction-outer">
 <div class="Haven-introduction-container">
     <div class="Haven-introduction-title-left">

         <i class="title">Haven</i>
         <i>快来入驻慧问探索新知吧</i>
     </div>
     <div class="Haven-introduction-post">

     </div>
 </div>
</div> -->
<div class="top-story-container">
    <div class="top-story-main-column">
        <div class="top-story-main-column-card">
            <div class="top-story-main-column-card-head">
                <nav class="top-story-main-column-card-head-nav">
                    <a href="http://localhost:8080/mainPageAttention"  th:href="@{/mainPageAttention}" class="first-a attention-a" style="color: #0087fe;"><i class="iconfont iconfont-pattention" style="color: #ff9606;">&#xe602;</i> 关注</a>
                    <a href="http://localhost:8080/mainPageRecommend"  th:href="@{/mainPageRecommend}" class="recommend-a" ><i class="iconfont iconfont-recommend"  style="color: rgb(92, 137, 219);">&#xe628;</i> 推荐</a>
                    <a href="http://localhost:8080/mainPageTrending"  th:href="@{/mainPageTrending}" class="trending-a"><i class="iconfont iconfont-trending" style="color: red;">&#xe603;</i> 热搜</a>
                    <a href="/mainPageVedio"  th:href="@{/mainPageVedio}" class="vedio-a"><i class="iconfont iconfont-vedio" style="color: rgba(218, 218, 42, 0.608);">&#xe60a;</i> 视频</a>
                </nav>
            </div>
<div >

            <div class="top-story-content-attention top-story-content" >

                <div class="top-story-content-detail2  article-container" th:each="post, postStat : ${allPosts}">

                    <a  th:href="@{/posts/select/id?id={id}(id=${post.id})}" style="color: black"><div class="top-story-content-head"> <h3 th:text="${post.title}"></h3></div>
                    </a>
                        <div id="content" >
                    <div class="top-story-content-detail-list">
                        <p class="top-story-content-detail-list-p pattention-top-story-content-detail-list-p">
                            <a  th:href="@{/posts/select/id?id={id}(id=${post.id})}" style="color: black">
                                   <span class=" pattention-user-information" th:if="${userStat.index == postStat.index}"  th:each="user, userStat : ${allUsers}">
                                        <img src="../static/img/OIP-C.jpg" alt="" th:src="${user.avatar}">
                                        <span th:text="${user.username}">

                                        </span>
                                        <i class="word-introduction" th:text="${user.bio}">&nbsp;&nbsp;</i>
                                    </span>


                            <i class=" pattention-empty" th:text="${post.content}">                                 </i>  </a>
                        </p>

                        <span class=" pattention-read-full-text"><i class="iconfont">&#xe60d;</i>阅读全文<i class="iconfont">&#xe7d1;</i></span>
                    </div>
                        <div class="content-right" >
                        <img src="../static/img/OIP-C.jpg" alt="" th:src="${post.imageUrl}"  th:if="${not #strings.isEmpty(post.imageUrl)}" class="img-content">

                        </div>
                    </div>


                    <div class="top-story-content-footer">
                        <button class="top-story-content-footer-button top-story-content-footer-button-start"  th:value="${post.commentCount}" th:data-value="${post.id}" onclick="articleDetail(this.dataset.value)"><i class="iconfont comment" >&#xe619;</i><span th:text="${post.commentCount}"></span>条评论</button>


                        <button class="top-story-content-footer-button top-story-content-footer-button-like"  th:value="${post.id}" th:data-is-liked="${post.isLiked }"><i class="iconfont like" >&#xe610;</i>喜欢</button>
                        <button class="top-story-content-footer-button top-story-content-footer-button-more">
                            <a  th:href="@{/toReportOthers/?postId={id}(id=${post.id})}" style="color: rgba(169, 178, 185, 0.937);">
                                <i class="iconfont more">&#xe621;</i>
                                举报
                            </a>
                        </button>
                        <div class="share-outer">
                            <div class="share-detail">
                                <i class="iconfont">&#xe618;</i>
                                <span>复制链接</span>
                            </div>
                        </div>
                    </div>
                    <div class="comment-publish">
                        <div class="comment-input-outer">
                            <div class="comment-input">
                                <input type="text" placeholder="留下你的精彩评论吧"  class="comment-input-detail" th:data-value="${post.id}">
                                <div class="input-icons">
                                    <i class="iconfont">&#xe642; </i>
                                    <span class="emoji-icon" th:data-value="${post.id}" onclick="publish(this.dataset.value)"> 发布</span>

                                </div>
                            </div>
                        </div>
                        <div class="comment-item-outer" th:data-value="${post.id}">

                        </div>


                    </div>

                        </div>
                </div>
            </div>
            </div>

    </div>
    <div class="top-story-right-column">
        <div class="creation-center-outer">
            <div class="creation-center-container">
                <div class="creation-center-container-title">
                                <span style="font-size: 15px;">
                                    <i class="iconfont" style="font-size: 21px;">&#xe6c7;</i>
                                    创作中心
                                </span>
                    <span style="font-size: 12px; color:#99a0a7; ;">
                                草稿箱(0)
                               </span>

                </div>
                <div class="creation-center-container-function">

                    <div class="post-vedio">

                        <span class="vedio-span"><i class="iconfont vedio" style="color: #ff9606;">&#xe60a;</i></span>
                        <i>发视频</i>
                    </div>
                    <div class="write-article">
                        <span class="article-span"><i class="iconfont article" style="color: yellowgreen;">&#xe640;</i></span>
                        <i>写文章</i>
                    </div>
                    <div class="write-thought-button">
                            <span class="thought-span"><i class="iconfont thought"
                                                          style="color: rgb(11, 151, 158);">&#xe614;</i></span>
                        <i>写想法</i>

                    </div>
                    <div class="write-thought" style="display: none;">

                        <form id="thoughtForm" th:action="@{/thought/add}" method="post">
                            <div class="post-popup">
                                <input type="text" name="code" style="display: none" class="none-input">
                                <input type="text" id="titleInput" placeholder="请输入标题" maxlength="50" name="title">
                                <div class="char-count" id="titleCharCount">0/50</div>
                                <textarea id="contentTextarea" placeholder="分享你此刻的想法..." name="content"></textarea>
                                <div class="char-count char-count2" id="contentCharCount">0/300</div>

                                <button id="postButton">发布</button>
                                <div class="close-icon" id="closeButton">&times;</div>
                            </div>
                        </form>

                    </div>
                </div>
                <div class="creation-center-container-prompt">
                    <div class="left">
                        <p>开启你的慧问创作之旅吧</p>
                        <span>即将推出处女作，解锁创作之旅
                                        速来加入慧问创作者行列吧~
                                    </span>
                    </div>
                    <div class="right">

                        <img src="../static/img/可爱的小狗_05_爱给网_aigei_com.gif" alt="" th:src="@{/img/可爱的小狗_05_爱给网_aigei_com.gif}">
                    </div>

                </div>
                <div class="write-outer">
                    <button class="write-button">
                        <i class="iconfont" style="color: rgb(0, 170, 255);">&#xe69a;</i>
                        开始创作
                    </button>
                </div>
            </div>
        </div>
        <div class="carefully-selected-author-outer">
            <div class="carefully-selected-author-container">
                <div class="carefully-selected-author-head"><i class="iconfont">&#xe6df;</i>
                    盐选作者平台</div>
                <div class="carefully-selected-author-body">
                                <span>匠心打磨，丰厚收益<br>
                                    <i>已有60万+作者入驻</i>
                                </span>
                    <span>
                                    <img src="../static/img/金钱(Money)_爱给网_aigei_com.gif" alt="" th:src="@{/img/金钱(Money)_爱给网_aigei_com.gif}">
                                </span>
                </div>
                <div class="carefully-selected-author-button">
                    <button><i class="iconfont">&#xe65d;</i>去投稿</button>
                </div>
            </div>
        </div>
    </div>

</div>
</div>
</div>
<a href="#">
    <div class="up-down">
        <img src="../static/img/向下.svg" th:src="@{/img/向下.svg}">

    </div>
</a>
<div class="mask"></div>

<script th:inline="javascript">

    let wait_answer=document.getElementsByClassName('wait-answer')[0]
    console.log(wait_answer)
    wait_answer.addEventListener('click',()=>{
        event.preventDefault();
        window.location.href='/thoughtMainPage'
    })

    let posts = [[${allPosts}]];
    let users = [[${allUsers}]];
    let pageInfo = [[${pageInfo}]];
    let user = [[${user}]];
    console.log(user)
    console.log(users)
    console.log(posts)
  console.log(pageInfo)
    // const mask=document.querySelector('.mask')
    // const titleInput = document.getElementById('titleInput');
    const titleCharCount = document.getElementById('titleCharCount');
    const contentTextarea = document.getElementById('contentTextarea');
    const contentCharCount = document.getElementById('contentCharCount');
    const closeButton = document.getElementById('closeButton');
    const writeThought=document.getElementsByClassName('write-thought')[0]
    const writeThought_button=document.getElementsByClassName('write-thought-button')[0]
    // 标题字数统计
    titleInput.addEventListener('input', function () {
        const charCount = titleInput.value.length;
        titleCharCount.textContent = charCount + '/50';
    });
    contentTextarea .addEventListener('input',function(){
        const charCount=contentTextarea.value.length
        contentCharCount.textContent=charCount+'/300'
    })

    closeButton.addEventListener('click',()=>{
        console.log(closeButton)
        writeThought.style.display='none'
        contentTextarea.value=''
        titleInput.value=''
        document.body.classList.remove('open')
        mask.style.display='none'
    })
    writeThought_button.addEventListener('click',()=>{
        writeThought.style.display='block'
        mask.style.display='block'

        document.body.classList.add('open')
    })

    const write_article=document.getElementsByClassName('write-article')[0]
    write_article.addEventListener('click',()=>{
        window.location.href = "http://localhost:8080/postArticle";
    })
    let top_story_content_footer_button_likes=document.getElementsByClassName('top-story-content-footer-button-like')
    let likes=document.getElementsByClassName('like')
    for (let i = 0; i < top_story_content_footer_button_likes.length; i++) {
        top_story_content_footer_button_likes[i].addEventListener('click', function () {


            let like_value=top_story_content_footer_button_likes[i].value
            const postIdNum = Number(like_value);
            console.log(postIdNum)
            console.log(window.getComputedStyle(top_story_content_footer_button_likes[i]).color)
            if (window.getComputedStyle(top_story_content_footer_button_likes[i]).color === 'rgba(169, 178, 185, 0.937)') {

                $.ajax({
                    url: `/posts/like?postId=${like_value}`,

                    type: 'POST',
                    data: {postId: postIdNum},
                    success: function (result) {
                        showCustomAlert('点赞成功', 3000)
                        top_story_content_footer_button_likes[i].style.color= 'rgba(255,0,0,1)'
                        likes[i].style.color= 'rgba(255,0,0)'
                        console.log('发送点赞请求到:', this.url);
                    },
                    error: function (error) {
                        showCustomAlert('点赞失败: ' + error.status + ' ' + error.statusText, 3000);
                        console.log(error);
                        console.log('发送点赞请求到:', this.url);
                    }

                })

            }else {
                console.log(1111111)
                $.ajax({
                    url: `/posts/cancelLike?postId=${like_value}`,

                    type: 'POST',
                    data: {postId: postIdNum},
                    success: function (result) {
                        showCustomAlert('取消点赞', 3000)
                        top_story_content_footer_button_likes[i].style.color = 'rgba(169, 178, 185, 0.937)'
                        likes[i].style.color= 'rgba(169, 178, 185, 0.937)'
                        console.log('发送点赞请求到:', this.url);
                    },
                    error: function (error) {
                        showCustomAlert('取消点赞失败: ' + error.status + ' ' + error.statusText, 3000);
                        console.log(error);
                        console.log('发送点赞请求到:', this.url);
                    }

                })
            }

        })
    }

    function showCustomAlert(message, duration) {
        let customAlert = document.getElementById('customAlert');
        if (!customAlert) {
            div_outter=document.createElement('div');
            customAlert = document.createElement('div');
            customAlert.id = 'customAlert';
            // customAlert.style.margin='7px 12px';
            const alertMessage = document.createElement('p');
            alertMessage.id = 'alertMessage';
            customAlert.appendChild(alertMessage);

            document.body.appendChild(customAlert);
        }

        const alertMessage = document.getElementById('alertMessage');

        alertMessage.textContent = message;
        if(alertMessage.textContent==null){
            customAlert.style.display = 'none';
        }

        customAlert.style.display = 'block';
        setTimeout(() => {
            customAlert.style.display = 'none';
        }, duration);
    }
    const pathname = window.location.pathname;
    let temp=0;
    if(pathname==='/mainPageRecommend'){
        temp=1

        document.getElementsByClassName('none-input')[0].value=temp
    }else if(pathname==='/mainPageAttention'){
        temp=2
        document.getElementsByClassName('none-input')[0].value=temp
    }else if(pathname==='/mainPageTrending'){
        temp=3
        document.getElementsByClassName('none-input')[0].value=temp
    }
    let result = [[${result}]];
    let errorMessage = [[${errorMessage}]];
    if (result && result !== '') {
        showCustomAlert(result, 3000);
    }
    if (errorMessage && errorMessage !== '') {
        showCustomAlert(errorMessage, 3000);
    }

    //
    // let comments=document.getElementsByClassName('comment-publish')
    // let top_story_content_footer_button_starts=document.getElementsByClassName('top-story-content-footer-button-start')
    // for(let i=0;i<top_story_content_footer_button_starts.length;i++){
    //     top_story_content_footer_button_starts[i].addEventListener('click',()=>{
    //         if( top_story_content_footer_button_starts[i].innerHTML.includes('收起评论')){
    //             comments[i].style.display='none'
    //             let value=top_story_content_footer_button_starts[i].value
    //             top_story_content_footer_button_starts[i].innerHTML=`<i class="iconfont comment" >&#xe619;</i> ${value}条评论`
    //         }else{
    //             top_story_content_footer_button_starts[i].innerHTML=`<i class="iconfont comment" >&#xe619;</i> 收起评论`
    //             comments[i].style.display='block'
    //         }
    //
    //
    //
    //
    //
    //     })
    // }

    let personalMainPage=document.getElementsByClassName('personalMainPage')[0]
    console.log(personalMainPage)
    personalMainPage.addEventListener('click',()=>{
        event.preventDefault();
        window.location.href='http://localhost:8080/userHomepage'
    })
let mask=document.getElementsByClassName('mask')[0]
    closeButton.addEventListener('click',()=>{
        console.log(closeButton)
        writeThought.style.display='none'
        contentTextarea.value=''
        titleInput.value=''
        document.body.classList.remove('open')
        mask.style.display='none'
    })
    writeThought_button.addEventListener('click',()=>{
        writeThought.style.display='block'
        mask.style.display='block'

        document.body.classList.add('open')
    })
    let write_button=document.getElementsByClassName('write-button')[0]
    write_button.addEventListener('click',()=>{
        window.location.href='http://localhost:8080/creativeCenter'
    })

    // const write_article=document.getElementsByClassName('write-article')[0]
    // write_article.addEventListener('click',()=>{
    //     window.location.href = "http://localhost:8080/postArticle";
    // })
    const post_vedio=document.getElementsByClassName('post-vedio')[0]
    post_vedio.addEventListener('click',()=>{
        window.location.href = "http://localhost:8080/vedio";
    })
    let mainPage=document.getElementsByClassName('mainPage')[0]
    mainPage.addEventListener('click',()=>{
        event.preventDefault();

        window.location.href='http://localhost:8080/mainPageRecommend'
    })
    // 获取按钮元素
    const likeButton = document.getElementsByClassName('top-story-content-footer-button-like');
    const like=document.getElementsByClassName('like')
    console.log(likeButton)
    for(let i=0;i<likeButton.length;i++){
        // 获取 data-is-liked 的值
        const isLikedValue = likeButton[i].dataset.isLiked;
        console.log(likeButton[i])
        console.log(isLikedValue)
        if(Number(isLikedValue)){
            likeButton[i].style.color='red'
            like[i].style.color='red'
            console.log(11111111111)
        }
    }

</script>
</body>
<script src="../static/js/mianPage.js" th:src="@{/js/mainPage.js}"></script>
<script src="../static/js/mainPageAttention.js" th:src="@{/js/mainPageAttention.js}"></script>
</html>